'use strict';

import React, {Component} from 'react';
import {Text, View, StyleSheet, Platform, ToastAndroid} from 'react-native';
import theme from '../config/Theme';
import px2dp from '../util/px2dp';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import CustomTabBar from '../component/CustomTabBar';
import HomeTab from './HomeTab';
// import TabItemSwitcherPage from './TabItemSwitcherPage';
// import RCTDeviceEventEmitter from 'RCTDeviceEventEmitter';

export default class HomeFragment extends Component{
    constructor(props){
        super(props);
        this.state = {
            tabNames: ['推荐','健康','资讯','搞笑','情感','哲理','美食','亲子','爱美','生活','职场','旅行','娱乐']
        };
        this._handleTabNames = this._handleTabNames.bind(this);
    }

    render(){
        return(
            <View style={styles.container}>
                    <ScrollableTabView  
                        renderTabBar={() => <CustomTabBar/>}
                        tabBarBackgroundColor="rgb(22,131,251)"
                        tabBarActiveTextColor="white"
                        tabBarInactiveTextColor="rgba(255,255,255,0.5)"
                        tabBarTextStyle={{fontSize: theme.scrollView.fontSize}}
                        tabBarUnderlineStyle={theme.scrollView.underlineStyle}
                       >
                        {this.state.tabNames.map((item, i) => {
                            return(
                                <HomeTab tabLabel={item} key={i} tabTag={item} navigator={this.props.navigator}/>
                            );})
                        }
                    </ScrollableTabView>
            </View>
        );
    }

    // componentDidMount(){
    //     RCTDeviceEventEmitter.addListener('valueChange', this._handleTabNames);//?干嘛的
    // }

    // componentWillUnmount(){
    //     RCTDeviceEventEmitter.removeListener('value', this._handleTabNames);
    // }

    _handleTabNames(tabNames){
        this.setState({ tabNames: tabNames });
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.pageBackgroundColor
    },
    text: {
        color: theme.text.color,
        fontSize: theme.text.fontSize
    }
});